<template>
  <div class="search_result">
    <!-- 导航栏 -->
    <van-nav-bar fixed :border="false">
      <template #title>
        <span>{{ keyword }}的搜索结果</span>
      </template>
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 搜索结果 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="v in list"
        :key="v.art_id.toString()"
        :title="v.title"
        @click="$router.push(/article/ + v.art_id.toString())"
      />
    </van-list>
    <!-- /搜索结果 -->
  </div>
</template>

<script>
import { getSearchResult } from '@/api/search'
export default {
  name: 'SearchResult',
  // 路由参数
  props: ['keyword'],
  data() {
    return {
      list: [], // 搜索结果
      loading: false, // 是否正在加载
      finished: false, // 是否加载完毕
      page: 1, // 页数
    }
  },
  methods: {
    // 一、瀑布流滚动加载,加载搜索结果的方法
    async onLoad() {
      // 1.1 调用方法,保存搜索结果,当加载完之后,每次页码+1,重新请求数据
      const { data } = await getSearchResult(this.keyword, this.page)
      // console.log(data)
      const arr = data.data.results
      this.list = this.list.concat(arr)
      // 1.2 加载状态结束
      this.loading = false
      // 1.3 数据全部加载完成
      if (arr.length === 0) {
        this.finished = true
      }
      // 1.4 页码+1
      this.page++
    },
  },
  created() {},
}
</script>

<style></style>
